<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca; margin-left: -0.1094rem">授权认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组173.png" alt="" />
          </div>
          <span style="margin-left: -0.1979rem">税务信息采集</span>
        </li>
      </ul>
    </div>

    <div class="f2" v-loading="loading">
      <div class="f2_form">
        <el-form :model="form" label-width="150px" :rules="rules">
          <el-form-item label="纳税人识别号" prop="a">
            <el-input @blur="submitBtns" v-model="form.a"></el-input>
          </el-form-item>
          <el-form-item label="法人手机号" prop="b">
            <el-input v-model="form.b" @blur="b"></el-input>
            <div class="timer">
              <span v-if="time == 30" @click="getAuthCode(time, form.b)"
                >获取验证码</span
              >
              <!---->
              <span v-else>{{ time }}秒后重新获取</span>
            </div>
          </el-form-item>
          <el-form-item label="手机验证码" prop="c">
            <el-input @blur="submitBtns" v-model="form.c"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="submitBtn()"
          :src="require(`@/assets/shangpiao/组${radio ? '38' : '39'}.png`)"
          alt=""
        />
        <span> 阅读并同意 </span>
        <a @click="submitBtn()">《授权协议》</a>
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div>
          <button
            :disabled="isLock"
            class="btn btn3"
            v-bind:class="{ active: btn & radio }"
            @click="addKJApplys()"
          >
            确认授信
          </button>
        </el-tooltip>
        <button
          :disabled="isLock"
          v-else
          class="btn btn3"
          v-bind:class="{ active: btn & radio }"
          @click="addKJApplys()"
        >
          确认授信
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch, updateapplyid } from "@/utils";
export default {
  data() {
    return {
      radio: false,
      time: 30,
      isLock: false,
      disabled: false,
      loading: false,
      btn: false,
      coopid: "",
      productcode: "",
      productid: "",
      productname: "",
      ProductList: null,
      form: {
        a: "",
        b: "",
        c: "",
      },

      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  // 生命周期方法
  mounted() {
    this.productcode = localStorage.getItem("productcode");
    this.productid = localStorage.getItem("id");
    this.productname = localStorage.getItem("productname");

    this.coopid = localStorage.getItem("coopid");
    this.getFindproduct();
  },
  methods: {
    // 登录手机号验证
    b() {
      let value = Number(this.form.b);
      if (this.form.b == "") return this.submitBtns();
      this.form.b = value.toFixed(0);
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.form.b)) {
        this.form.b = "";
        this.submitBtns();
        return;
      }
      this.submitBtns();
    },
    // 获取验证码
    async getAuthCode(time, phoneno) {
      if (phoneno == "") return this.$Message.error("请输入手机号");
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(phoneno))
        return this.$Message.error("验证码发送失败请检查手机号");
      // let data = await smsSend(phoneno);
      // if (data.msg == "ok") {
      this.$Message.success("验证码发送成功");
      this.code = true;
      if (time != 30) {
        return;
      }
      let times = setInterval(() => {
        time--;
        this.time = time;
        if (this.time == -1) {
          clearInterval(times);
          this.time = 30;
        }
      }, 1000);
      return;
      // }
      // this.$Message.error("验证码发送失败请检查手机号");
    },
    // 获取最上端产品列表
    async getFindproduct() {
      let url = "/api/BusinessSPs/findproduct";
      let params = {
        productcode: this.productcode,
      };
      let data = await myPostFetch(url, params);
      this.ProductList = data.data;
    },
    // 产品申请第1步
    async addKJApplys() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      if (!this.btn) return;
      this.loading = true;
      if (this.form.a == "" || this.form.b == "" || this.form.c == "")
        return this.$Message.error("请填写信息");
      let url = "/api/pros/empower";
      let params = {
        productcode: this.productcode,
        productid: this.productid,
        productname: this.productname,
        coopid: this.coopid,
        taxidnum: this.form.a,
        phone: this.form.b,
        code: this.form.c,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        // 绑定合同
        await updateapplyid(data.data, localStorage.getItem("flowId"));
        localStorage.setItem("applyid", data.data);
        this.$router.push(`/sjghdApplication3?taxidnum=${this.form.a}`);
        this.loading = false;
        return;
      }
      this.loading = false;
    },
    //submitBtn
    submitBtn() {
      this.radio = !this.radio;
      this.submitBtns();
    },
    submitBtns() {
      if (
        this.form.a != "" &&
        this.form.b != "" &&
        this.form.c != "" &&
        this.radio
      ) {
        this.btn = true;
      } else {
        this.btn = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .f1 {
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            height: 0.0104rem;
            margin: 0 0.0833rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999;

          margin-top: 0.0156rem;
        }
      }
    }
  }
  .unit {
    position: relative;
    width: 90%;
    height: 0.1042rem;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 0.0729rem;
    color: #606266;
    p {
      position: absolute;
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        right: 15.1%;
      }
      right: 5.5%;
      top: -0.0156rem;
    }
  }
  .f2 {
    margin-top: 5%;
    width: 100%;
    .f2_form {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-left: -0.401rem;
      .timer {
        height: 0.2083rem;
        position: absolute;
        right: 0.1042rem;
        top: 0;
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #3f6ef2;
        cursor: pointer;
        user-select: none;
        // background-color: #f00;
      }
    }
  }
  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.2865rem;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      bottom: 0.3646rem;
    }
    width: 1.4323rem;
    height: 0.1771rem;
    background: #3f6ef2;
    border-radius: 0.0208rem;
    font-size: 0.0938rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.1302rem;
    text-align: center;
    margin-top: 0.0521rem;
    user-select: none;
    span {
      font-size: 0.0729rem;
      color: #666;
      margin-left: 0.0365rem;
    }
    img {
      width: 0.0781rem;
      height: 0.0781rem;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 0.0729rem;
      color: #3f6ef2;
    }
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2604rem;
    margin: 0.026rem 0 0.026rem 0;

    .btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1979rem;
      background: #3f6ef2;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 0.1563rem;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  .special_top {
    position: absolute;
    @media only screen and (min-width: 0px) and (max-width: 1024px) {
      left: -1.52rem;
    }
    @media only screen and (min-width: 1025px) and (max-width: 1079px) {
      left: -1.5rem;
    }
    @media only screen and (min-width: 1080px) and (max-width: 1167px) {
      left: -1.4rem;
    }
    @media only screen and (min-width: 1168px) and (max-width: 1234px) {
      left: -1.28rem;
    }
    @media only screen and (min-width: 1235px) and (max-width: 1299px) {
      left: -1.21rem;
    }
    @media only screen and (min-width: 1300px) and (max-width: 1420px) {
      left: -1.15rem;
    }
    @media only screen and (min-width: 1420px) and (max-width: 2580px) {
      left: -1.1rem;
    }
    top: -0.0469rem;
    font-size: 0.0885rem;
    color: #1f1f20;
  }
  .special_bottom {
    position: absolute;
    @media only screen and (min-width: 0px) and (max-width: 1024px) {
      left: -1.435rem;
      top: 0.0938rem;
    }
    @media only screen and (min-width: 1025px) and (max-width: 1079px) {
      left: -1.41rem;
      top: 0.0938rem;
    }
    @media only screen and (min-width: 1080px) and (max-width: 1167px) {
      left: -1.32rem;
      top: 0.0938rem;
    }
    @media only screen and (min-width: 1168px) and (max-width: 1234px) {
      left: -1.21rem;
    }
    @media only screen and (min-width: 1235px) and (max-width: 1299px) {
      left: -1.1517rem;
    }
    @media only screen and (min-width: 1300px) and (max-width: 1420px) {
      left: -1.0917rem;
    }
    @media only screen and (min-width: 1420px) and (max-width: 2580px) {
      left: -1.0417rem;
    }

    top: 0.0625rem;
    font-size: 0.0885rem;
    color: #1f1f20;
  }
  // 弹出框
  .dialog-center {
    box-sizing: border-box;
    padding: 0 0.026rem;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 3.05rem;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 2.8rem;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 3.4375rem;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 3.125rem;
        height: 2.3958rem;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 3.125rem;
        height: 2.3958rem;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 3.9583rem;
        height: 3.0208rem;
      }

      background-color: #fff;

      h1 {
        font-size: 0.0938rem;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 0.6302rem;
      height: 0.1615rem;
      color: #3f6ef2;
      border: 0.0052rem solid #3f6ef2;
      border-radius: 0.0208rem;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.1042rem;
  }
}
::v-deep .hint .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 56%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 49%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 40%;
    // background-color: #f00;
  }
}
::v-deep .hint .el-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.026rem 0.1042rem;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
::v-deep .el-dialog__header {
  border: 0;
  padding: 0.026rem 0.1042rem;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 2.3438rem;
  height: 0.2031rem;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep .el-form-item {
  margin-bottom: 0.0938rem;
}
::v-deep .el-form-item__label {
  font-size: 0.0885rem;
  font-weight: 400;
  color: #1f1f20;
}
</style>
<style lang="scss"></style>
